<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>345评分</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" href="../../css/simple-line-icons.css">
		<link rel="stylesheet" href="../../css/mui-ext.css">
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 35%;
				padding-top: 10px;
			    padding-right: 5px;
			    padding-left: 5px;		
			    text-align: center;		
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 60%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				padding-top: 30px;
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-input-group .mui-input-row{
				height: 50px;
			}
			
			#check-code-btn{
			    line-height: 12px;
			    float: right;
			    width: 100px;
			    padding: 5px;
			    top: 15px;
			    right: 10px;
			}
			.mui-input-row .mui-input{
			    padding-left: 0px;
			    padding-top: 25px;
		   }
		   
		   .mui-input-range input {
			    width: 50px;
			    padding: 3px;
			    line-height: 24px;
		   		color: #00a8c6;
		   		/*font-weight: 600;*/
		   		font-size: 24px;
			}
		   .field-range {
		   		top: 10px;
			}
			
			.mui-input-range input[type=range] {
			    position: relative;
			    width: 100%;
			    height: 2px;
			    margin: 17px 0;
			    padding: 0;
			    cursor: pointer;
			    border: 0;
			    border-radius: 3px;
			    outline: 0;
			    background-color: #999;
			    -webkit-appearance: none!important
			}
			.mui-input-range input[type=range]::-webkit-slider-thumb {
			    -webkit-appearance: none;
			    height: 24px;
			    width: 24px;
			    margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
			    background: #ffffff; 
			    border-radius: 50%; /*外观设置为圆形*/
			    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
			    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
			}				
	
		</style>
	</head>
	<body>
		<div class="mui-content" style="margin-top: -15px;">
			<form class="mui-input-group" style="top:0px;" id="grade_form">
				<div class="mui-input-row mui-input-range">
					<label><span>快乐:</span><input type="text" class='field-range-input' id="score01-range-input" value='60' name="score01"></label>
					<input type="range" class='field-range' id="iptHappy" value="60" min="0" max="100" />
				</div>
				<div class="mui-input-row mui-input-range">
					<label><span>自信:</span><input type="text" class='field-range-input' id="score02-range-input" value='60' name="score02"></label>
					<input type="range" class='field-range' id="iptConfidence" value="60" min="0" max="100" />
				</div>
				<div class="mui-input-row mui-input-range">
					<label><span>动力:</span><input type="text" class='field-range-input' id="score03-range-input" value='60' name="score03"></label>
					<input type="range" class='field-range' id="iptPower" value="60" min="0" max="100" />
				</div>
				<div class="mui-input-row mui-input-range">
					<label><span>和谐:</span><input type="text" class='field-range-input' id="score04-range-input" value='60' name="score04"></label>
					<input type="range" class='field-range' id="iptHarmonious" value="60" min="0" max="100" />
				</div>
				<div class="mui-input-row mui-input-range">
					<label><span>积极:</span><input type="text" class='field-range-input' id="score05-range-input" value='60' name="score05"></label>
					<input type="range" class='field-range' id="iptPositive" value="60" min="0" max="100" />
				</div>
				<div class="mui-input-row mui-input-range">
					<label><span>规则:</span><input type="text" class='field-range-input' id="score06-range-input" value='60' name="score06"></label>
					<input type="range" class='field-range' id="iptRule" value="60" min="0" max="100" />
				</div>
				<div class="mui-input-row mui-input-range">
					<label><span>合力:</span><input type="text" class='field-range-input' id="score07-range-input" value='60' name="score07"></label>
					<input type="range" class='field-range' id="iptTogether" value="60" min="0" max="100" />
				</div>
				<div class="mui-input-row mui-input-range">
					<label><span>关注:</span><input type="text" class='field-range-input' id="score08-range-input" value='60' name="score08"></label>
					<input type="range" class='field-range' id="iptAttention" value="60" min="0" max="100" />
				</div>
				<div class="mui-input-row mui-input-range">
					<label><span>肯定:</span><input type="text" class='field-range-input' id="score09-range-input" value='60' name="score09"></label>
					<input type="range" class='field-range' id="iptSure" value="60" min="0" max="100" />
				</div>
				<div class="mui-input-row mui-input-range">
					<label><span>鼓励:</span><input type="text" class='field-range-input' id="score10-range-input" value='60' name="score10"></label>
					<input type="range" class='field-range' id="iptEncourage" value="60" min="0" max="100" />
				</div>
				<div class="mui-input-row mui-input-range">
					<label><span>尊重:</span><input type="text" class='field-range-input' id="score11-range-input" value='60' name="score11"></label>
					<input type="range" class='field-range' id="iptRespect" value="60" min="0" max="100" />
				</div>
				<div class="mui-input-row mui-input-range">
					<label><span>信任:</span><input type="text" class='field-range-input' id="score12-range-input" value='60' name="score12"></label>
					<input type="range" class='field-range' id="iptTrust" value="60" min="0" max="100" />
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='save-btn' class="mui-btn mui-btn-block mui-btn-default">保存</button>
			</div>
			<div class="mui-content-padded">
				<p></p>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/utils/http.utils.js"></script>
		<script>
			var $currUser = JSON.parse(localStorage.getItem("login-user-parent"));
			document.getElementById("save-btn").addEventListener("tap", function(){
				if($currUser == null || $currUser == ""){
					mui.toast("暂无登录，不能提交...");
					return;
				}
				var $score = "";
				var $happy = document.getElementById("iptHappy").value; //快乐
				var $confidence = document.getElementById("iptConfidence").value; //自信
				var $power = document.getElementById("iptPower").value; //动力
				var $harmonious = document.getElementById("iptHarmonious").value; //和谐
				var $positive = document.getElementById("iptPositive").value; //积极
				var $rule = document.getElementById("iptRule").value; //规则
				var $together = document.getElementById("iptTogether").value; //合力
				var $attention = document.getElementById("iptAttention").value; //关注
				var $sure = document.getElementById("iptSure").value; //肯定
				var $encourage = document.getElementById("iptEncourage").value; //鼓励
				var $respect = document.getElementById("iptRespect").value; //尊重
				var $trust = document.getElementById("iptTrust").value; //信任
				$score = $happy + "," + $confidence + "," + $power + "," + $harmonious + "," + $positive + "," + $rule
				         + "," + $together + "," + $attention + "," + $sure + "," + $encourage + "," + $respect  + "," + $trust;
				mui.ajax({
					url : $request_url.addScore,
					type : "post",
					headers: {
						"Authorization": $headers_authorization
					},
					dataType : "json",
					data : {
						userId : $currUser.userId,
						values : $score
					},
					success : function(dat){
						if(dat.code == 0){
							mui.toast("评分成功");
							mui.openWindow({
								url : "manage345.html?tab=gs"
							});
						} else {
							mui.toast(dat.message);
							return;
						}
					}, error : function(err){
						mui.toast("服务繁忙...")
					}
					
				});
			});
		</script>
	</body>
</html>
